CSSセレクタ完全ガイド: 種類、使い方、優先順位を徹底解説

CSSセレクタは、HTML文書内の特定の要素を選択し、スタイルを適用するために使用されます。適切なセレクタを使用することで、Webページのデザインやレイアウトを効率的に制御することができます。

この記事では、主要なCSSセレクタの種類、それぞれの使用方法、idとclassの違い、そしてそれらの優先順位について詳しく解説します。

1. id セレクタ (id Selectors)

idセレクタは、HTML要素に一意に割り当てられた id 属性に基づいて、特定の要素を選択するために使用されます。

HTMLでは、id="要素ID" のように、要素に id 属性を追加します。
CSSでは、#要素ID のように、シャープ記号（#）の後に id 属性の値を指定することで、idセレクタを定義します。

例:

<p id="intro">これは段落です。</p>
<style>
#intro {
  color: blue;
  font-size: 18px;
}
</style>

注意:

id 属性の値は、文書内で一意である必要があります。つまり、同じ id 値を持つ要素は1つだけ存在する必要があります。
id 属性の値は、数字で始めることはできません。一部のブラウザでは、数字で始まる id 属性は正しく機能しない場合があります。

2. class セレクタ (class Selectors)

classセレクタは、HTML要素に適用された class 属性に基づいて、複数の要素を選択するために使用されます。

HTMLでは、class="クラス名" のように、要素に class 属性を追加します。
CSSでは、.クラス名のように、ドット記号（.）の後に class 属性の値を指定することで、classセレクタを定義します。

例:

<p class="highlight">これは重要な段落です。</p>
<p>これは通常の段落です。</p>
<p class="highlight">これも重要な段落です。</p>
<style>
.highlight {
  background-color: yellow;
}
</style>

CSS セレクタについて

注意:

1つの要素に複数の class 属性を指定することができます。その場合は、スペース区切りで複数のクラス名を指定します。
class 属性の値は、数字で始めることはできません。一部のブラウザでは、数字で始まる class 属性は正しく機能しない場合があります。

3. タイプセレクタ (Type Selectors)

タイプセレクタは、HTML要素のタイプ（タグ名）に基づいて、要素を選択するために使用されます。

CSSでは、要素のタグ名をそのまま指定することで、タイプセレクタを定義します。

例:

<h1>見出し1</h1>
<p>これは段落です。</p>
<style>
h1 {
  font-size: 24px;
}

p {
  line-height: 1.5;
}
</style>

注意:

タイプセレクタは大文字と小文字を区別しません。つまり、h1 と H1 は同じように扱われます。

4. 全局セレクタ (Universal Selectors)

全局セレクタは、アスタリスク記号（*）を使用して、HTML文書内のすべての要素を選択します。

CSSでは、* を指定することで、全局セレクタを定義します。

例:

* {
  margin: 0;
  padding: 0;
}

注意:

全局セレクタは、すべての要素にスタイルを適用するため、意図しないスタイルの競合が発生する可能性があります。
通常は、特定の要素にのみスタイルを適用するために、他のセレクタと組み合わせて使用されます。

5. id と class の違い (Differences between id and class)

特徴	id セレクタ	class セレクタ
目的	特定の要素に一意な名前を付ける	複数の要素に共通のスタイルを適用する
適用範囲	文書内で1回のみ使用可能	複数の要素に使用可能
JavaScriptとの連携	JavaScriptで要素を直接参照可能	JavaScriptで要素をグループとして参照可能
CSSの記述	#要素ID	.クラス名
属性	id 属性	class 属性

id セレクタは、ページ上の特定の要素を識別するために使用され、JavaScriptとの連携にも役立ちます。一方、class セレクタは、複数の要素に共通のスタイルを適用するために使用されます。

6. id と class のスタイルの優先順位 (Style Priority of id and class)

idセレクタとclassセレクタが同じ要素に適用され、同じプロパティに異なる値が設定されている場合、idセレクタのスタイルが優先されます。これは、idセレクタがclassセレクタよりも特異性が高いためです。

例:

<p id="my-paragraph" class="highlight">これは段落です。</p>
<style>
#my-paragraph {
  color: red;
}

.highlight {
  color: blue;
}
</style>

上記の例では、#my-paragraph セレクタの方が特異性が高いため、段落のテキストの色は赤になります。

idセレクタとclassセレクタの優先順位は、プログラムにおけるローカル変数とグローバル変数の関係に似ています。ローカル変数はグローバル変数よりも優先されるのと同様に、idセレクタはclassセレクタよりも優先されます。

CSS セレクタに関するQ&A

Q1: 複数のセレクタを組み合わせて使用することはできますか？

A1: はい、複数のセレクタを組み合わせて使用することができます。例えば、h1.title のように、タイプセレクタとclassセレクタを組み合わせて、title クラスが適用された <h1> 要素を選択することができます。

Q2: 子要素を選択するセレクタはありますか？

A2: はい、子結合子（>）を使用して、子要素を選択することができます。例えば、ul > li のように、ul 要素の直接の子要素である li 要素を選択することができます。

Q3: セレクタの優先順位をさらに細かく制御することはできますか？

A3: はい、!important ルールを使用することで、セレクタの優先順位をさらに細かく制御することができます。ただし、!important ルールはスタイルシートの保守性を低下させる可能性があるため、注意して使用してください。